<template>
  <div class="component message-detail">
    <data-grid :labelWidth="100" row-key="orapId" contentAlign="left">
      <!-- <data-grid-item label="消息类型：" :span="6">{{message.type|enumConvert('reminderType')}}</data-grid-item> -->
      <data-grid-item label="日期：" :span="12" >{{message.createTime|dateTimeFormat}}</data-grid-item>
      <data-grid-item label="消息标题：" :span="12" >{{message.title}}</data-grid-item>
      <data-grid-item label="消息内容：" :span="12" v-if="message.caseNumber != null && message.caseNumber != ''">
        {{message.content.split(message.caseNumber)[0]}}<a @click="openExecutionPage()">{{message.caseNumber}}</a>{{message.content.split(message.caseNumber)[1]}}
      </data-grid-item>
      <data-grid-item label="消息内容：" :span="12" v-else>{{message.content}}</data-grid-item>
    </data-grid>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { Component, Prop,Emit } from "vue-property-decorator";
import { DataGrid, DataGridItem } from "@zct1989/vue-component";
import { namespace } from 'vuex-class';
import { OpenExecutionData } from "~/config/types";
import { CASE_CHANNEL } from "~/config/enum.config"
const CollectionExecutionModule = namespace('collection-execution');

@Component({
  components: {
    DataGrid,
    DataGridItem
  }
})
export default class MessageDetail extends Vue {
  @CollectionExecutionModule.Action private openCollectionExecution;
  @Prop({ required: true, default: () => ({}) })
  private message;


  /**
   * 进入查看执行页
   */
  @Emit("close-view-detail")
  private openExecutionPage() {
    this.openCollectionExecution(new OpenExecutionData(this.message.caseId, this.message.caseNumber, CASE_CHANNEL.tel))
  }
  private mounted(){
    console.log(this.message,"message")
  }
}
</script>
